<template>
	<view class="c-content">
		<view class="add-recode">
			<u-toast ref="uToast"></u-toast>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">工作摘要:</text>
				<u-input placeholder="请输入" border="bottom" v-model="workObj.workSum" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type">
				<text class="type-title r-flex">工作详情:</text>
				<u-textarea v-model="workObj.workDec" placeholder="请输入内容" count>
				</u-textarea>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">记录开始时间:</text>
				<u--form labelPosition="left" :model="model">
					<u-form-item borderBottom @click="showAction = true; hideKeyboard()">
						<u-input :customStyle="dateStyle" v-model="model.dateInfo.createDate" disabled
							disabledColor="#ffffff" placeholder="请选择时间" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<u-datetime-picker :show="showAction" confirmColor="#1C5AD2" :value="actionVal"
					@close="showAction = false" @cancel="showAction = false" @confirm="confirmAction" mode="datetime">
				</u-datetime-picker>
			</view>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">记录结束时间:</text>
				<u--form labelPosition="left" :model="model">
					<u-form-item borderBottom @click="showEnd = true; hideKeyboard()">
						<u-input :customStyle="dateStyle" v-model="model.dateInfo.endTime" disabled
							disabledColor="#ffffff" placeholder="请选择时间" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<u-datetime-picker :show="showEnd" confirmColor="#1C5AD2" :value="endVal" @close="showEnd = false"
					@cancel="showEnd = false" @confirm="confirmEnd" mode="datetime">
				</u-datetime-picker>
			</view>
			<u-gap height="12" bgColor="#f7f6fa"></u-gap>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex" style="padding-bottom: 0;">关联类型:</text>
				<u-input ref="attrBtn" placeholder="请选择" border="bottom" v-model="workObj.assType" maxlength="20"
					:disabled="true">
				</u-input>
				<u-input ref="attrBtn" placeholder="请选择案件" border="bottom" v-model="caseInfo.name" maxlength="20"
					:disabled="true">
				</u-input>
			</view>
		</view>
		<u-gap height="12" bgColor="#f7f6fa"></u-gap>
		<view class="m-nav">
			<view class="add-type" style="padding-top: 0;">
				<text class="type-title r-flex">上传附件:</text>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10">
				</u-upload>
			</view>
		</view>
		<u-gap height="12" bgColor="#f7f6fa"></u-gap>
		<view class="add-btn">
			<u-button @click="addCreate()" shape="circle" color="#1C5AD2">立即创建</u-button>
		</view>
	</view>
</template>

<script>
	import caseDetail from "../caseList/caseDetail.js"
	export default {
		mixins: [caseDetail],
		data() {
			return {
				workObj: {
					workSum: "",
					workDec: "",
					assType: "案件"
				},
				// 记录开始时间
				showAction: false,
				model: {
					dateInfo: {
						createDate: "",
						endTime: ""
					},
				},
				actionVal: Number(new Date()),
				// 记录结束时间
				showEnd: false,
				endVal: Number(new Date()),
				dateStyle: {
					paddingLeft: '9px'
				},
				fileList: [],
				caseId: ""
			}
		},
		onLoad: function(option) {
			this.caseId = option.id;
		},
		methods: {
			// 创建记录
			addCreate() {
				const that = this;
				if (this.workObj.workDec == '') {
					return this.$refs.uToast.show({
						message: '请输入工作详情',
						type: 'default',
					})
				}
				var openid = uni.getStorageSync("OPEN-ID");
				let data = {
					name: this.workObj.workSum,
					detail: this.workObj.workDec,
					startTime: this.model.dateInfo.createDate,
					endTime: this.model.dateInfo.endTime,
					caseId: this.caseId,
					openid: openid,
				}
				if (data.startTime == data.endTime) {
					this.$refs.uToast.show({
						message: "你是不是偷懒了，工作时间为0",
						type: 'err',
					})
					return;
				}
				this.$sendRequest.getCreateRecord(data).then(res => {
					if (res.code == 200) {
						uni.navigateBack({
							url: '/pages/caseList/caseProcess'
						})
						this.subscripMsg();
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'err',
						})
					}
				}).catch(err => {})
			},
			subscripMsg() {
				wx.requestSubscribeMessage({
					tmplIds: ['L3Q_FWJc6Qq57njTt52PXjQzp7_2MKn6PGsky__1WUs'],
					success(res) {}
				})
			},
			// 确认开始时间
			confirmAction(e) {
				const that = this;
				that.model.dateInfo.createDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				this.showAction = false;
			},
			// 确认开始时间
			confirmEnd(e) {
				const that = this;
				that.model.dateInfo.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				this.showEnd = false;
			},
			// 隐藏软键盘
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-content {
		padding-bottom: 160rpx;
	}

	.add-recode {
		width: 100%;
		padding: 24rpx 24rpx 48rpx;
		background-color: #fff;
	}

	/* 案件创建下一步按钮 */
	.add-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 24rpx 12%;
		padding-bottom: 30rpx;
		background-color: #fff;
	}

	.add-btn /deep/ .u-button {
		font-size: 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
		margin-top: 0rpx;
	}

	.m-nav {
		padding: 0 24rpx 32rpx;
		background-color: #fff;
	}
</style>